<template>
    <div>
   <div class="tabT">
        <el-table :data="list" border style="width: 100%">
            <el-table-column prop="name" label="日期" width="180"></el-table-column>
            <el-table-column
            prop="age"
            label="姓名"
            width="180">
            </el-table-column>
            <el-table-column
            prop="tel"
            label="地址">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">修改</el-button>
             <el-button type="text" size="small">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
   </div>

    </div>
</template>

<script>
import {mapActions,mapState} from 'vuex'
    export default {
        data(){
            return{
                  tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
            }
        },
        computed:{
            ...mapState({
                list : state => state.list
            })
        },
        methods:{
            ...mapActions([
                'getList'
            ]),
             handleClick(row) {
                console.log(row);
            }
        },
        mounted(){
            this.getList()
        }
    }
</script>

<style scoped>
.tabT{
    margin:20px 0 0 40px;
}
</style>